<template>
  <div class="card-list" ref="content" >
    <a-list
      rowKey="id"
      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
      :dataSource="dataSource"
      :loading="tableLoding"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="!item || item.id === undefined">
          <a-button class="new-btn" type="dashed" @click="showAdd">
            <a-icon type="plus"/>
            新增问题
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <a slot="title">{{ item.title }}</a>
              <!-- <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/> -->
              <div class="meta-content" slot="description">{{ item.content }}</div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="setStatus(item)">{{item.is_enable?'显示':'隐藏'}}</a>
              <a @click="upIssue(item)">修改</a>
              <a @click="delIssue(item)">删除</a>
            </template>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
    <!-- <div class="pagination_box">
      <a-pagination v-model="current" :total="total"/>
    </div> -->
    <a-modal :title="createOrEdit==1?'新增常见问题':'修改常见问题'" class="add_modal" v-model="modalAdd" :footer="null"  :width="600">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
            label="问题标题"
            :labelCol="{lg: {span: 6}, sm: {span: 6}}"
            :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
            <a-input
            v-decorator="[
              'title',
              {rules: [{ required: true }]}
            ]"
            name="title"
            placeholder="" />
        </a-form-item>
        <a-form-item
            label="排序"
            :labelCol="{lg: {span: 6}, sm: {span: 6}}"
            :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
            <a-input
            v-decorator="[
              'sort',
              {rules: [{ required: true }]}
            ]"
            name="sort"
            placeholder="填入数字越大,排序越靠前" />
        </a-form-item>
        <a-form-item
            label="问题内容"
            :labelCol="{lg: {span: 6}, sm: {span: 6}}"
            :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
            <a-textarea name="content"  placeholder="" style="resize:none; height:120px;"  maxlength="80" v-decorator="[
              'content',
              {rules: [{ required: true }]}
            ]"/>
        </a-form-item>
        <div style="text-align:right;margin-top:40px;">
          <a-button htmlType="submit" type="primary" style="margin-right:30px;color:#fff;">确认</a-button>
          <a-button style="margin-right:50px;" @click="hiedAdd">取消</a-button>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>

<script>

// const dataSource = []
// dataSource.push({})
// for (let i = 0; i < 11; i++) {
//   dataSource.push({
//     id: i,
//     title: 'Alipay',
//     avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//     content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
//   })
// }
import { problem, addProblem, enableProblem, delProblem, upProblem } from '@/api/getData'
import aPagination from 'ant-design-vue/lib/pagination'
export default {
  name: 'OftenIssue',
  components:{aPagination},
  data () {
    return {
      form: this.$form.createForm(this),
      dataSource: [],
      current: 1,
      pageSize: 50,
      total: 0,
      modalAdd: false,
      content: '',
      title: '',
      tableLoding: false,
      issueItem: '',
      createOrEdit: 1
    }
  },
  created(){
    this.getIssue()
  },
  methods: {
    upIssue(item){
      this.createOrEdit = 0
      this.issueItem = item
      this.modalAdd = true
      let obj = {};
      obj.title = item.title;
      obj.content = item.content;
      obj.sort = item.sort;
      setTimeout(()=>{
        this.form.setFieldsValue(obj);
      },300)
    },
    setStatus(item){
      let status = 0;
      if(item.is_enable === 0){
        status = 1;
      }
      enableProblem(item.id,status).then(res=>{
        this.getIssue()
      })
    },
    delIssue(item){
      delProblem(item.id).then(res=>{
        this.getIssue()
      })
    },
    showAdd(){
      this.modalAdd = true
      this.createOrEdit = 1
      this.form.setFieldsValue({
        title: '',
        content: '',
        sort: ''
      });
    },
    hiedAdd(){
      this.modalAdd = false
    },
    getIssue(){
      this.tableLoding = true
      problem(this.current,this.pageSize).then(res=>{
        console.log(res)
        let reslist = res.data.list
        reslist.unshift({})
        this.dataSource = reslist
        this.total = res.data.total
      }).finally(e=>{
          this.tableLoding = false
          // this.searchLoading = false
      })
    },
    handleSubmit(e){
      let that = this;
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
         this.$confirm({
            title: that.createOrEdit == 1?'确认新增常见问题?':'确认修改常见问题?',
            content: '',
            onOk() {
              if(that.createOrEdit == 1){
                addProblem(values.title,values.content,values.sort).then(res=>{
                  if(res.code == 200){
                    that.$message.info('新增成功');
                    that.hiedAdd();
                    that.getIssue()
                  }
                })
              }else if(that.createOrEdit == 0){
                upProblem(that.issueItem.id,values.title,values.content,values.sort).then(res=>{
                  if(res.code == 200){
                    that.$message.info('修改成功');
                    that.hiedAdd();
                    that.getIssue()
                  }
                })
              }
              
            },
            onCancel() {console.log('取消新增')}
        });
          
        }
      })
    }
  },
  watch: {
    current: function(){
      this.getIssue()
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~@/components/index.less";

  .card-list {
    /deep/ .ant-card-body:hover {
      .ant-card-meta-title>a {
        color: @primary-color;
      }
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 12px;

      &>a {
        display: inline-block;
        max-width: 100%;
        color: rgba(0,0,0,.85);
      }
    }

    /deep/ .meta-content {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      height: 64px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

      margin-bottom: 1em;
    }
  }

  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }

  .ant-card-actions {
    background: #f7f9fa;

    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 100%;
        &:hover {
          color: @primary-color;
        }
      }
    }
  }

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }

</style>
